<template>
  <div class="item">
    <van-cell
      :class="{ cell: item.cover.type > 1, call: true} "
      :title="item.title"
      @click="details(item.art_id)"
    >
      <div>
        <img
        v-lazy="item"
        v-for="item in item.cover.images"
        :key="item.index"
      />
      </div>
    </van-cell>
    <div class="bottom">
      <span>置顶</span>
      <span>{{ item.aut_name }}</span>
      <span>{{ item.comm_count }}评论</span>
      <span>{{ item.pubdate | time }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'item',
  props: ['item'],
  data () {
    return {}
  },
  methods: {
    // 详情页
    details (articleId) {
      this.$router.push(`/details/${articleId}`)
    }
  },
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.cell {
  flex-direction: column;
  .van-cell__value{
    display: flex;
  }
}
.call{
  padding-bottom: 50px;
  /deep/img{
    width: calc((100vw - 64px) / 3);
    height: 150px;
  }
}
.item {
  position: relative;
  background-color: #fff;
}
.bottom {
  position: absolute;
  bottom: 15px;
  left: 32px;
  font-size: 23px;
  color: #ccc;
}
.bottom span {
  margin-right: 22px;
}
.bottom span:nth-child(1) {
  color: red;
}
</style>
